<template>
  <div class="it">学习 Vue3</div>
  <div class="space">一、功能分别展示</div>
  <div class="list">
    <a class="item" href="javascript:;" v-for='item in ListData'>
      <div class="card">
        <div class="c_name">{{ item.name }}</div>
        <div class="c_des">{{ item.des }}</div>
        <template v-if="item.componet && Array.isArray(item.componet)">
          <div class="c_comp" v-for="c in item.componet" @click="onPush(c.pushPath)">{{ c.name }}</div>
        </template>
        <template v-else>
          <div class="c_comp" @click="onPush(item.componet.pushPath)">{{ item.componet.name }}</div>
        </template>
      </div>
    </a>
  </div>
  <hr>
  <div class="space">二、封装组件功能展示</div>
  <div>还未写</div>
</template>

<script setup>
import { useRouter } from "vue-router"
import ListData from './data'
const router = useRouter()

// const gotoNext = () => {
//   console.log('进入下一页')
//   router.push('/2')
// }

// 页面写的有点复杂了
const onPush = (name) => {
  router.push(name)
}
</script>

<style>
.it { padding: 0; margin: 10px 10px 0 10px; text-align: center; font-size: 28px; font-weight: bold; }
.space { margin: 20px 0 0 0; padding: 0; text-align: center; display: block; }
.list { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 20px; margin: 0; }
.list .item {
  flex: 1;
  display: block;
  margin: 15px 15px 0 15px;
  padding: 0 15px;
  background-color: rgba(128, 228, 235, 0.146);
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
}
.list .item .card { color: black; }
.list .item .card .c_name { font-size: 20px; color: blue }
.list .item .card .c_des { color: gray; }
</style>